<!--
 * @Author: hu_binbin
 * @Date: 2021-08-06 09:29:24
 * @LastEditTime: 2021-08-20 15:54:08
 * @Description: 归档成功提示页
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
		</Theader>
        <div class="card">
            <div class="card-title center_center">
                <van-image :src="icon.checkOn" width="27" height="27"></van-image>
                <span style="margin-left: 10px;">归档成功!</span>
            </div>
            <div class="card-content">
                关联巡视任务默认同步当前巡视记录您可点击下方“调整巡视记录”按钮，进行调整！
            </div>
            <div class="card-btn">
                <van-button class="btn-i" size="small" plain color="#2ABAA3" type="primary" @click='backList'>返回巡视列表</van-button>
                <van-button class="btn-i" size="small" plain color="#2ABAA3" type="primary" @click="queryDetail">查看详情</van-button>
            </div>
        </div>
        <div class="tab-con">
            <div class="tab-item" v-for="(item,index) in showTaskList" :key="index">
                <div class="tab-icon">
                    <div class="box3">熄灯巡视</div>
                </div>
                <div class="tab-title">
                    <span>待填写</span>
                    <label>东善桥变全面巡视</label>
                    <!-- <van-tag style="margin-left: 1rem;" plain type="danger" color="#FB716D">标签</van-tag> -->
                </div>
                <div class="tab-sub">
                    <span>交花园山变电站</span>
                    <label>交流110kv</label>
                </div>
                <div class="tab-per tab-per-flex">
                    <div class="flex-center">
                        <van-icon size="18" name="user-circle-o" />
                        <span style="margin-left: 5px;">巡视人：</span>
                        <label>巡视人、巡视人</label>
                    </div>
                    <!-- <div class="flex-center">
                        <span style="color:#FB716D">即将到期</span>
                        <van-icon style="margin-left: 5px;" size="18" name="question-o" />
                    </div> -->
                </div>
                <div class="tab-time">
                    <div class="time-t">
                        <van-icon size="18" name="underway-o" />
                        <span>巡视计划时间：</span>
                    </div>
                    <div class="time-cont">2020/06/09 09:21</div>
                    <van-button class="time-b" plain 
                    color="#F06D6D" type="primary" size="mini" @click='backList'>调整巡视记录</van-button>
                </div>
            </div>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "reduceFileList",
		components:{
			Theader
		},
		data() {
			return {
				title: "归档提醒",
				active: 0,
				activeNames:[],
				icon: {
                    checkOn:require('../../../../assets/tour/check_on.png'),
                    
				},
				showPicker: false,
				taskName: "",//任务名称
				showTaskList:[
                    {},
                    {}
                ],
            }
		},
		computed: {

		},
		methods: {
            
            back(){
                this.$router.go(-1)
            },
            /**
            * @description: 返回巡视列表
            * @param {*}
            * @return {*}
            */         
			backList() {

            },
            /**
             * @description: 查看详情
             * @param {*}
             * @return {*}
             */
            queryDetail() {

            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
	}
	.bg_4dbfae{
		background: #F0F0F0 ;
	}
	.center_center{
        display:flex;
        justify-content:center;
        align-items:center;
	}
    .card{
        background: #fff;
        margin: 0.7rem;
        margin-top: 3.5rem;
    }
	.card .card-title{
        margin: 2rem 1rem 1rem 1rem;
        font-size: 1rem;
    }
    .card .card-content{
        margin: 0 1.5rem;
        font-size: 0.8rem;
        text-align: center;
    }
    .card .card-btn{
        margin: 1rem;
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }
    .card .btn-i{
        width: 45%;
        border-radius: 1rem;
    }
    .tab-con{
        margin: 0.7rem;
    }
    .tab-con .tab-item{
        padding: 0.5rem;
		background: #fff;
		position: relative;
		overflow: hidden;
        margin-bottom: 0.7rem;
	}
    .tab-icon{
		display: flex;
		position: absolute;
		right: -7%;
		top: 9%;
		transform: rotate(45deg);
	}
    .box3{
		width: 100px;
		z-index: 10;
		font-size: 13px;
		line-height: 24px;
		text-align: center;
		height: 24px;
		background: #18B49B;
		color: #fff;
	}
    .tab-title{
		font-size: 15px;
		font-weight: bold;
		color:#333;
		padding: 0.5rem 0px;
	}
	.tab-title span{
		color:#0EB295;
		margin-right: 10px;
	}
	.tab-sub{
		margin-bottom: 0.5rem;
		font-size: 13px;
    	color: #999;
	}
	.tab-per,.tab-time{
        display: flex;
        align-items: center;
		margin-bottom: 0.7rem;
		font-size: 13px;
    	color: #666;
        justify-content:space-between;
	}
	.tab-per-flex{
		display: flex;
		justify-content: space-between;
	}
    .time-t{
        display: flex;
		justify-content: space-between;
    }
	.time-b{
       width: 5.5rem; 
       font-size: 12px;
    }
	.flex-center{
		display: flex;
		align-items: center;
	}
</style>